..<template>
  <div>
    <!-- 筛选 -->
    <div style="float: left;display: flex;margin-bottom: 10px;">
      <el-input style="margin-left: 8px;width:50%"
        @clear="initWorkflowActHiTaskInst"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程定义名称"
        class="initWorkflowActHiTaskInst"
        v-model="workflowActHiTaskInstPage.processDefinitionName"
        @keydown.enter.native="initWorkflowActHiTaskInstQuery">
      </el-input>
      <el-input style="margin-left: 8px;width:50%"
        @clear="initWorkflowActHiTaskInst"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入任务名称"
        class="initWorkflowActHiTaskInst"
        v-model="workflowActHiTaskInstPage.taskName"
        @keydown.enter.native="initWorkflowActHiTaskInstQuery">
      </el-input>
      <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initWorkflowActHiTaskInstQuery">查询</el-button>
    </div>
    <div style="display: flex;justify-content: flex-end">
      <el-button
        type="primary"
        @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
      </el-button>
    </div>
<!-- 列表 -->
    <div>
        <el-table
          :data="WorkflowActHiTaskInstList"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
                <el-table-column
                        label="任务编号"
                        width="350">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>流程名称: {{ scope.row.processDefinitionName }}</p>
                            <p>任务名称: {{ scope.row.name }}</p>
                            <p>开始时间: {{ scope.row.startTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <p>结束时间: {{ scope.row.endTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <p>流程编号: {{ scope.row.processDefinitionId }}</p>
                            <p>实例编号: {{ scope.row.processInstanceId }}</p>
                            <p>路径编号: {{ scope.row.executionId }}</p>
                            <p>签收者: {{ scope.row.assignee }}</p>
                            <p>任务key: {{ scope.row.taskDefinitionKey }}</p>
                            <p>租户编号: {{ scope.row.tenantId }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.id }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="任务名称"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="任务key"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.taskDefinitionKey }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="签收者"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.assignee }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="开始时间" width="250">
                    <template slot-scope="scope">
                        <span>{{scope.row.startTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="结束时间" width="250">
                    <template slot-scope="scope">
                        <span v-if="scope.row.endTime!=null">{{scope.row.endTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                title="通过流程实例编号获取审批信息"
                                @click="TaskCommentByProcessInstanceId(scope.row)"><i class="el-icon-view"></i>详情</el-button>
                        <el-button
                                type="text"
                                title="通过历史任务编号删除历史任务信息"
                                @click="deleteProcessHiTaskInstByTaskId(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
  </div>
</template>

<script>
export default {
 name:"workflowActHiTaskInst",
 data(){
   return{
    loading: false,
     // 封装查询条件
    workflowActHiTaskInstPage:{
      processDefinitionName:'',
      taskName:'',
      startTime:null,
      endTime:null,
      pageNum: 1,
      pageSize: 10
    },
    // 初始化列表
    WorkflowActHiTaskInstList:[],
    total: 0,
    // 初始化多选复选框
    multipleSelection:[]
   }
  },
  mounted(){
    // 初始化列表
    this.initWorkflowActHiTaskInstQuery();
  },
 methods:{
   // 通过历史任务编号删除历史任务信息
   deleteProcessHiTaskInstByTaskId(data){
    this.$confirm('此操作将永久删除【'+data.id+'】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
            this.deleteRequest('/activity/ActHiTaskInst/delete/ProcessHiTaskInstByTaskId/'+data.id).then(resp=>{
            if (resp){
                this.initWorkflowActHiTaskInstQuery();
            }
        })
    }).catch(() => {
        this.$message({
        type: 'info',
        message: '已取消删除'
        });
    });
   },
   // 通过流程实例编号获取审批信息
   TaskCommentByProcessInstanceId(data){
     this.$router.push({
         path: '/TaskComment',
         // 参数传递
         query: {
             processInstanceId:data.processInstanceId,
             viewPage:'workflowActHiTaskInst'
         }
     })
   },
   // 查询框清空事件
   initWorkflowActHiTaskInst(){
     this.initWorkflowActHiTaskInstQuery();
   },
   // 重置查询条件
    resetCondition(){
        this.workflowActHiTaskInstPage.taskName = '';
        this.workflowActHiTaskInstPage.processDefinitionName = '';
        this.workflowActHiTaskInstPage.startTime = null;
        this.workflowActHiTaskInstPage.endTime = null;
        this.initWorkflowActHiTaskInstQuery();
    },
   // 初始化列表
   initWorkflowActHiTaskInstQuery(){
      this.loading = true;
        this.postRequest("/activity/ActHiTaskInst/query/ProcessHiTaskInstPageList",this.workflowActHiTaskInstPage).then(resp => {
        this.loading = false;
        if (resp) {
          this.WorkflowActHiTaskInstList = resp.data.list;
          this.total = resp.data.total;
        }
    });
  },
  // 复选框
  handleSelectionChange(val){
    this.multipleSelection = val;
  },
   // 分页
  sizeChange(currentSize) {
    this.workflowActHiTaskInstPage.pageSize = currentSize;
    this.initWorkflowActHiTaskInstQuery();
  },
  currentChange(currentPage) {
    this.workflowActHiTaskInstPage.pageNum = currentPage;
    this.initWorkflowActHiTaskInstQuery();
  }
 }
}
</script>

<style>

</style>
